﻿@{
    Layout = "~/Views/Shared/MyLayOutNew.cshtml";
}


<link href="~/ueditor/themes/iframe.css" rel="stylesheet" />
<link href="~/ueditor/themes/default/css/ueditor.min.css" rel="stylesheet" />
<script type="text/javascript" src="~/Content/easyui/jquery.min.js"></script>
<script src="~/ueditor/ueditor.config.js"></script>
<script src="~/ueditor/ueditor.all.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<link href="~/ueditor/themes/iframe.css" rel="stylesheet" />
<style type="text/css">
    .top-hd {
        z-index: 99999;
    }

    .device {
        width: 367px;
        height: 744px;
        margin: 50px auto;
        background: url('/Content/images/phone7.png') no-repeat;
    }

    .demo-wrap {
        position: relative;
        width: 320px;
        height: 556px;
        background: #F0F3F6;
        top: 105px;
        left: 27px;
        overflow-y: scroll;
        overflow-x: hidden;
    }

    #demo-wrap-img {
        max-width: 100%;
    }

    .edit_right_content {
        position: fixed;
        top: 55px;
        height: 100%;
        width: 200px;
        margin-left: 980px !important;
        background: #f8f8f8;
    }

    .edit_right_content_background {
        position: fixed;
        top: 55px;
        max-height: 100%;
        width: 200px;
        margin-left: 980px !important;
        background: #f8f8f8;
    }

    .p-a {
        padding: 1rem !important;
    }

    .edit_qrcode_img {
        width: 168px;
    }

    .modal {
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        z-index: 9999;
        background: rgba(0,0,0,0.5);
    }

    .top-inp {
        text-align: center;
        padding: 60px 0 40px;
    }

    .form-file {
        opacity: 0;
        position: absolute;
        top: 55px;
        height: 263px;
        z-index: 1;
    }

    #top-img-show {
        position: absolute;
        top: 55px;
        height: 263px;
    }

        #top-img-show button {
            float: right;
            clear: both;
            padding: 3px 7px;
            margin: 3px 15px;
            background: #FFFFFF;
            border-radius: 8px;
            border: 1px solid #999999;
            color: #444444;
            font-size: 12px;
        }

    #delete {
        position: absolute;
        right: 10px;
        top: 15px;
        z-index: 2;
    }

    #upload {
        position: absolute;
        right: 10px;
        top: 50px;
        z-index: 2;
    }

    #edui1 {
        border: 0;
        width: 608px !important;
        background: #FFFFFF;
    }

    #edui1_iframeholder, #edui1_iframeholder, .view {
        width: 608px !important;
    }

    .max_width {
        max-width: 100% !important;
    }

    .form-group {
        margin-bottom: 0px;
        width: 610px;
    }

    .edui-box {
        margin: 3px !important;
    }

    #edui1_bottombar {
        display: none;
    }

    #edui1_toolbarbox {
        width: 606.5px;
        text-align: center;
    }

    .edui-popup div {
        height: auto !important;
    }

    .edui-default .edui-colorpicker-preview {
        height: 20px !important;
        line-height: 20px !important;
    }
</style>
<div style="overflow: auto; background: #f0f3f6">
    <input type="hidden" id="fileNames" name="fileNames" />
    <div style="float:left;width:610px;height:800px;margin-left:370px;">
        <div class="col-sm-6">
            <div class="panel">

                <input type="file" id="filet" name="filet" class="form-file" value="" />

                <div id="top-img-show">
                    <button id="delete" onclick="ImgRemove()">删除</button>
                    <button id="upload" onclick="FileClick()">上传</button>
                </div>

                <div class="top-inp">
                    <img id="img" name="img" src="~/Content/images/top-img.png" style="margin-bottom:20px" />
                    <p style="font-size:12px;color:#999999">请上传图片</p>
                    @*<p style="margin-bottom:20px;font-size:12px;color:#999999">没有图片将不会在手机端占据页面空间</p>*@
                    <button style="background-color:#FFFFFF;border:1px solid #999999;border-radius:6px;font-weight:500;padding:3px 7px">上传图片</button>
                </div>

                <div class="panel-body" style="overflow:hidden">
                    <div class="form-group has-success">
                        <input type="text" class="form-control" id="NewsName" name="NewsName" placeholder="模板标题" style="width: 610px; position: relative; z-index: 2"
                               value="@ViewData["Title"]" />
                    </div>
                    <div class="form-group has-warning" style="float: left; background-color: #F0F3F6;">
                        <textarea class="A4page" id="myEditor" name="NewsContent">@ViewData["EditContent"]</textarea>
                        @*<textarea class="layui-textarea" id="LAY_demo1" style="display: none;height:500px;"></textarea>*@

                    </div>

                </div>

            </div>

        </div>
    </div>

    <div class="edit_right_content" id="edit_right_content">

        <div class="p-a" id="qrcode_img_pro">
            <img src="//qr.api.cli.im/qr?data=http%3A%2F%2Fqr06.cn%2FCDFTd7&level=H&transparent=&bgcolor=%23ffffff&forecolor=%23000000&blockpixel=12&marginblock=1&logourl=&size=220&kid=cliim&time=1498789806&key=7d5ade3455439f073c51191763c83952" class="edit_qrcode_img" />
        </div>
        @*<div class="p-x p-y-0" style="margin-top:15px;">
                <button class="btn btn-secondary" style="width:160px;border-top:1px solid #999999;margin-left:20px;margin-bottom:20px;border-radius:8px">下载</button>
            </div>*@


        <hr />

        <div class="b-t p-x p-y-0">
            @*<button class="btn btn-secondary" style="width: 160px; border-top: 1px solid #999999; margin-left: 20px;margin-top:20px;border-radius: 8px; " onclick="PriviewResult()">预览效果</button>*@
            <button class="" style="width: 160px; border-top: 1px solid #999999; margin-left: 20px; margin-top: 20px; border-radius: 8px; background-color: #FFFFFF;color:#444444;" onclick="PriviewResult()">预览效果</button>
        </div>
        <div class="p-x p-y-0" style="margin-top:15px;">
            <button class="btn" style="width: 160px; border-top: 1px solid #999999; margin-left: 20px; margin-bottom: 20px; border-radius: 8px; background: green; color: #FFFFFF; " onclick="DoSumbit()">保存</button>
        </div>
    </div>
</div>

<!--模态框 弹出框-->
<div class="modal" hidden>
    <div class="device">
        <div class="demo-wrap" style="padding:0 10px">
            <img src="" id="demo-wrap-img" />
            <div class="easyui-navpanel" id="ContentPriview"></div>
        </div>
    </div>
</div>

<script type="text/javascript">
    //百度文档
    function load() {
        var ue = UE.getEditor('myEditor', {
            //文档内的功能
            toolbars: [
                ['undo', 'redo', 'bold', 'italic', 'underline', 'removeformat',
                'formatmatch', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', 'template',
                'fontborder', 'insertimage', 'rowspacingtop', 'rowspacingbottom', 'lineheight',
                'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'fontfamily', 'fontsize',
                ]
            ],
            autoFloatEnabled: true,
            allowDivTransToP: false,//阻止div标签自动转换为p标签
            initialFrameWidth: 610,
            initialFrameHeight: 500,
        });

    }

    $(function () {

        load();
    });



    var tempid = 0;
    var temp = null;
    temp = getUrlParam("tempId");
    var ImgUrl = '';

    //预览效果 并且生成二维码
    function PriviewResult() {

        ue = UE.getEditor('myEditor');
        var content = ue.getContent();

        $('#ContentPriview').html(content);
        var title = $('#NewsName').val();

        var formData = new FormData();
        formData.append("myfile", document.getElementById("filet").files[0]);
        formData.append("oper", "temp");
        $.ajax({
            url: "/Ashx/uploadNew.ashx",
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            success: function (data) {
                ImgUrl = data.saPath;
                if (temp == null) {//主

                    if (tempid == 0) {  //保存

                        $.ajax({
                            url: '/Jtsy/NewSaveData',
                            type: 'post',
                            data: { "oper": "add", "Content": content, "tempId": tempid, "title": title, "imgUrl": data.saPath },
                            async: false,
                            success: function (dat) {
                                // SubmitForm();
                                tempid = dat;

                                //生成二维码
                                $.ajax({
                                    url: '/Ashx/QrCode.ashx?oper=QrCode',
                                    type: 'get',
                                    data: { "TempId": tempid },
                                    async: false,
                                    success: function (data) {
                                        $('#qrcode_img_pro').html("<img  src='/Ashx/QrCode.ashx?oper=LookImg&imgParth=" + data + "'  class='edit_qrcode_img' />");
                                    }
                                })
                            }
                        })

                    }
                    else {//编辑


                        $.ajax({
                            url: '/Jtsy/NewSaveData',
                            type: 'post',
                            data: { oper: "edit", "Content": content, tempId: tempid, "title": title, "imgUrl": ImgUrl },
                            async: false,
                            success: function (t) {

                            }
                        })
                    }
                }
                else {
                    //生成二维码
                    $.ajax({
                        url: '/Ashx/QrCode.ashx?oper=QrCode',
                        type: 'get',
                        data: { "TempId": temp },
                        async: false,
                        success: function (dat) {
                            $('#qrcode_img_pro').html("<img  src='/Ashx/QrCode.ashx?oper=LookImg&imgParth=" + dat + "'  class='edit_qrcode_img' />");
                        }
                    })

                    $.ajax({
                        url: '/Jtsy/NewSaveData',
                        type: 'post',
                        data: { oper: "edit", "Content": content, tempId: temp, "title": title, "imgUrl": ImgUrl },
                        async: false,
                        success: function (t) {

                        }
                    })
                }
            },
            error: function () {
                alert("上传失败！");
                $("#imgWait").hide();
            }
        });



        //手机图片子适应
        $(".demo-wrap img").each(function () {
            if ($(this).width() > $(".demo-wrap").width() - 20) {
                $(this).css("width", $(".demo-wrap").width() - 20)
            }
        })

        //蒙层
        $(".modal").show();
    }







    //保存操作
    function DoSumbit() {

        ue = UE.getEditor('myEditor');
        var content = ue.getContent();

        $('#ContentPriview').html(content);
        var title = $('#NewsName').val();


        var formData = new FormData();
        formData.append("myfile", document.getElementById("filet").files[0]);
        formData.append("oper", "add");
        $.ajax({
            url: "/Ashx/uploadNew.ashx",
            type: "POST",
            data: formData,
            contentType: false,
            processData: false,
            success: function (data) {
                ImgUrl = data.saPath;

                if (temp == null) {

                    if (tempid == 0) {
                        $.ajax({//保存
                            url: '/Jtsy/NewSaveData',
                            type: 'post',
                            data: { "oper": "add", "Content": content, "title": title, "tempId": tempid, "imgUrl": ImgUrl },
                            async: false,
                            success: function (data) {
                                window.location.href = "/Jtsy/Index";
                            }
                        })
                    }
                    else {

                        Edit(content, tempid, title, ImgUrl);

                    }
                } else {

                    Edit(content, temp, title, ImgUrl);

                }

            }
        })





    }
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  //匹配目标参数
        if (r != null) return unescape(r[2]); return null; //返回参数值
    }
    function Edit(content, tempid, title, ImgUrl) {

        $.ajax({
            url: '/Jtsy/NewSaveData',
            type: 'post',
            data: { "oper": "edit", "Content": content, "tempId": tempid, "title": title, "imgUrl": ImgUrl },
            async: false,
            success: function (t) {
                if (t > 0) {
                    alert("保存成功！");
                }
                else {
                    alert("保存失败！");
                }
            }
        })
    }

    var FileValue;
    //top选择图片，显示图片
    function preview1(file) {

        var img = new Image(), url = img.src = URL.createObjectURL(file)


        $("#demo-wrap-img").attr("src", URL.createObjectURL(file))

        var $img = $(img).css({ "height": "263px", "max-width": "100%", "display": "block", "margin": "0 auto" }).attr("class", "the_img")
        img.onload = function () {
            URL.revokeObjectURL(url)
            ImgRemove()
            $("#top-img-show").css("background", "#FFFFFF")
            $('#top-img-show').append($img)
        }

        //提交表单
        //$('#myform').attr("enctype", "multipart/form-data");

        //document.myform.action='/Jtsy/GetForm';
        //document.myform.submit();

    }

    function ImgRemove() {
        $(".the_img").remove()
        $("#top-img-show").css("background", "none")
    }

    $(function () {

        $('[type=file]').change(function (e) {

            //提交表单
            //document.getElementById("myform").submit();



            var file = e.target.files[0]
            preview1(file)
        })
        // ip.preview();
    })

    function FileClick() {
        var ie = navigator.appName == "Microsoft Internet Explorer" ? true : false;

        if (ie) {
            document.getElementById("file").click();
            document.getElementById("filename").value = document.getElementById("file").value;
        } else {
            var a = document.createEvent("MouseEvents");//FF的处理
            a.initEvent("click", true, true);
            document.getElementById("file").dispatchEvent(a);
        }
    }



    $(".modal").click(function (event) {
        $(".modal").hide()
    });
    $(".device").on("click", function () {
        $(".device").show()
        event.cancelBubble = true
    })

    $(".form-file").css({ "width": $(".top-inp").width() })
    $("#top-img-show").css({ "width": $(".top-inp").width() })

    //var TopFixed = $(".top-hd").css("top")
    $("div").on("scroll", function () {
        $(".top-hd").css("position", "fixed")
        if ($("#top-img-show").offset().top < $(".top-hd").height()) {
            $(".edit_right_content").css("top", $(".top-hd").height())
        } else {
            $(".edit_right_content").css("top", $("#top-img-show").offset().top)
        }
        if (window.screenTop >= $(".panel-body").offset().top) {
            $("#edui1_toolbarbox").css({ "position": "fixed", "top": $(".top-hd").height(), "z-index": "9999" })
        } else {
            $("#edui1_toolbarbox").css("position", "static")
        }
    });

</script>

